<template>
    <div class="pay">
        <!--el-row>
            <el-button type="primary">支付宝</el-button>
            <el-button >其他</el-button>
        </el-row-->
        <div class="qrcodes">
            <div id="qrcodespay" @click="pay2" refs="qrcodes"></div>
            <div class="text">
                <div> 总金额：{{amt}}</div>
                <div> 订单号：{{no}}</div>
               
            </div>
        </div>
        <div class="bottom">
            <el-input v-model="input" placeholder="收款码" autofocus></el-input> 
            <el-button type="primary" style="margin-left:30px;margin-right:30px">收款</el-button>
        </div>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
    name:"pay",
    props:["type","sId"],
    data(){
        return{
            amt:"",
            no:"",
            payType:"支付宝",
            auth_code:"",
            mainId:""
        }
    },
    created(){
        this.initQrCode();
    },
    methods:{
        initQrCode(){
            this.$post("business","api/view/payQrCode",{type:this.type,jzId:this.sId}).then(data=>{
                this.no=data.no;
                this.amt=data.amt;
                //this.amt="1.5"
                this.mainId=data.mainId;
                this.pay2();
                
            })
        },
        qrcode(id,flagWidth,flagValue) {
            let qrcode = new QRCode(id, {
                width: flagWidth,  
                height: flagWidth,
                text: flagValue, // 二维码地址
            })
        },
        check(){
            let that=this;
            //this.$post("")
        },
        pay2(){
            document.getElementById("qrcodespay").innerHTML="";
            if(this.payType=="支付宝"){
                this.$post("business","alipay/pay2",{"trade_no":this.type+this.no,subject:"殡仪服务",content:"殡仪服务费",amount:this.amt,type:this.type}).then(data=>{
                    let qrCode=data.qrCode;
                    this.qrcode("qrcodespay",220,qrCode);
                    
                })
            }
        },
        pay3(){
            if(this.payType=="支付宝"){
                this.$post("business","alipay/pay3",{trade_no:this.type+this.no,auth_code:this.auth_code,total_amount:this.amt,store_id:this.mainId,type:this.type}).then(data=>{
                    
                })
            }
            
        }
    }
}
</script>
<style scoped>
.pay{
    display:flex;
    flex-direction: column;

}
.qrcodes{
    text-align:center;
    flex:1;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#qrcodes{
    text-align:center;
   
}
.bottom{
    height:50px;
    display:flex;
    flex-direction: row;
}
.text{
    font-weight:bold;
    font-size:18px;
    margin-top:15px;
    line-height:30px;
}
</style>